<template>
    <div class="bottom-jump">
        <RouterLink :to="backRoute.path" v-show="currentRouteIndex !== 0">
            {{ '<-' + backRoute.tabName }} </RouterLink>
                <RouterLink :to="nextRoute.path" v-show="currentRouteIndex !== routes.length - 1">{{
                    nextRoute.tabName + '->' }}</RouterLink>
    </div>
</template>

<script setup lang="ts">
import { routes } from '@/router'
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const router = useRoute()

const currentRouteIndex = computed(() => {
    return routes.findIndex((route) => route.path === router.path)
})

const backRoute = computed(() => {
    const backRouteIndex = Math.max(currentRouteIndex.value - 1, 0)
    return {
        tabName: routes[backRouteIndex].tabName,
        path: routes[backRouteIndex].path,
    }
})
const nextRoute = computed(() => {
    const nextRouteIndex = Math.min(currentRouteIndex.value + 1, routes.length - 1)
    return {
        tabName: routes[nextRouteIndex].tabName,
        path: routes[nextRouteIndex].path,
    }
})
</script>

<style>
.bottom-jump {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 50px;
    /* width: 100%; */
    left: 50px;
    right: 50px;
}
</style>
